package com.example.study.jetpack.compose

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.*

/**
 *  created by ws
 *   on 2022/2/28
 *   describe:https://blog.csdn.net/Mr_Tony/article/details/118751096?spm=1001.2014.3001.5502
 */
class Conpose中的ConstraintLayout布局 {
/*
如果布局复杂 可以多层嵌套column,row虽然对性能没有影响但是不利于可读和维护.
因此可以使用ConstraintLayout-compose来解决,单目前还不稳定部分api可能变更

相关依赖
implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0-alpha08"
    这个版本需要kotlin版本对应
    kotlinComilerVersion "1.5.10"
示例代码
 */
@Composable
fun ConstraintLayoutContent() {
    ConstraintLayout {
        // Create references for the composables to constrain
        val (button, text) = createRefs()

        Button(
            onClick = { /* Do something */ },
            // Assign reference "button" to the Button composable
            // and constrain it to the top of the ConstraintLayout
            modifier = Modifier.constrainAs(button) {
                top.linkTo(parent.top, margin = 16.dp)
            }
        ) {
            Text("Button")
        }

        // Assign reference "text" to the Text composable
        // and constrain it to the bottom of the Button composable
        Text("Text", Modifier.constrainAs(text) {
            top.linkTo(button.bottom, margin = 16.dp)
        })
    }
}
/*约束分离createRefFor
    上面例子,约束和布局包含在了一起,布局变得复杂的时候会难以维护
    因此可以使用layoutId的方式来进行约束布局
    主要由两步完成:
        1.将ConstraintSet作为参数传递给constraintLayout
        2.使用layoutId修饰符将再ConstraintSet中创建的引用
    分配给可组合项
    当需要更改约束条件时,只需要传递不同的ConstraintSet
    对于Compose来说,由控件组成页面,任何操作都尽量由控件组成
    而不牵扯过多的逻辑,和flutter类似
*/
@Composable
fun DecoupledConstraintLayout() {
    //根据传入的约束条件布局的控件
    BoxWithConstraints {
        val constraints = if (minWidth < 600.dp) {
            decoupledConstraints(margin = 16.dp) // Portrait constraints
        } else {
            decoupledConstraints(margin = 32.dp) // Landscape constraints
        }
        ConstraintLayout(constraints) {
            Button(
                onClick = { /* Do something */ },
                modifier = Modifier.layoutId("button")
            ) {
                Text("Button")
            }
            Text("Text", Modifier.layoutId("text"))
        }
    }
}

    private fun decoupledConstraints(margin: Dp): ConstraintSet {
        return ConstraintSet {
            val button = createRefFor("button")
            val text = createRefFor("text")

            constrain(button) {
                top.linkTo(parent.top, margin = margin)
            }
            constrain(text) {
                top.linkTo(button.bottom, margin)
            }
        }
    }
    /*
    * barriers
    * create***Barrier(***=top,bottom,start,end)
    * 设置以一个button1和text右边的一个栅栏将两者放在栅栏的左侧
    * val barrier = createEndBarrier(button1, text)
    * */
    @Composable
    fun ConstraintLayoutContent2() {
        ConstraintLayout {
            // Creates references for the three composables
            // in the ConstraintLayout's body
            val (button1, button2, text) = createRefs()

            Button(
                onClick = { /* Do something */ },
                modifier = Modifier.constrainAs(button1) {
                    top.linkTo(parent.top, margin = 16.dp)
                }
            ) {
                Text("Button 1")
            }

            Text("Text", Modifier.constrainAs(text) {
                top.linkTo(button1.bottom, margin = 16.dp)
                centerAround(button1.end)
            })

            val barrier = createEndBarrier(button1, text)
            Button(
                onClick = { /* Do something */ },
                modifier = Modifier.constrainAs(button2) {
                    top.linkTo(parent.top, margin = 16.dp)
                    start.linkTo(barrier)
                }
            ) {
                Text("Button 2")
            }
        }
    }

/*guidelines 辅助线*/
@Composable
fun LargeConstraintLayout() {
    ConstraintLayout {
        val text = createRef()

        val guideline = createGuidelineFromStart(fraction = 0.5f)
        Text(
            "This is a very very very very very very very long text",
            Modifier.constrainAs(text) {
                linkTo(start = guideline, end = parent.end)
                width = Dimension.preferredWrapContent
            }
        )
    }
}
/*chains 链式布局  ！！！不能和约束解耦共用*/
@Composable
fun constrainLayoutChain(){
    ConstraintLayout(modifier = Modifier.fillMaxWidth().background(color = Color.Cyan)) {
        // Create references for the composables to constrain
        val (button, text) = createRefs()
        createHorizontalChain(button,text,chainStyle = ChainStyle.Spread) //只需要这一行就可以了
        Button(
            onClick = { /* Do something */ },
            // Assign reference "button" to the Button composable
            // and constrain it to the top of the ConstraintLayout
            modifier = Modifier.constrainAs(button) {
                top.linkTo(parent.top, margin = 16.dp)
                bottom.linkTo(parent.bottom,margin = 16.dp)
            }
        ) {
            Text("Button")
        }

        // Assign reference "text" to the Text composable
        // and constrain it to the bottom of the Button composable
        Text("Text", Modifier.constrainAs(text) {
            centerVerticallyTo(parent)//在剩余空间中垂直居中
        })
    }
}


}